<template>
	<view class="page">
		<view class="search">
			<u-search placeholder="请输入网点名称或地址关键字" v-model="keyword" :clearabled="true" shape="round" :show-action="true" :animation="true"
			 border-color="grey" @custom="search()" @search="search()" :actionStyle="{color: '#fff'}"></u-search>
		</view>

		<!-- 搜索信息卡片列表 -->
		<view class="content-body">
			<view class="content" v-for="(item, i) in pageList" :key="i">
				<view class="order">
					<view class="order-head clearfix">
						<view class="order-id fl">
							<view class="fl">网点名称：</view>
							<view class="shop-name fr">{{item.title}}</view>
						</view>
					</view>
					<view class="order-content">
						<view class="order-card clearfix">
							<view class="order-img fl">
								<image class="padding-xs" :src="item.image"></image>
							</view>
							<view class="order-text fl ">
								<view class="clearfix">
									<view class="order-way fl">
										<view class="fl textsplit">网点地址: {{item.address}}</view>
										<u-button class="fr" type="success" size="mini" @click="openLoc(item.longitude, item.latitude)">导航</u-button>
									</view>
								</view>
								<view class="order-price">
									<view class="fl textsplit">网点电话：{{item.mobile}}</view>
									<u-button class="fr" size="mini" @click="callPhone(item.mobile)">拨打电话</u-button>
								</view>
							</view>
						</view>
					</view>
					<view class="order-footer">
						<u-row gutter="0">
							<u-col span="10">
								
							</u-col>
						</u-row>
					</view>
				</view>

			</view>

			<!-- <view class="content" v-if="showlist.length == 0" style="background-color: #EEEEEE;">
				<u-image src="/static/cart_empty.png" mode="widthFix"></u-image>
				<view style="text-align: center;">
					<text>暂无网点信息</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				pageList:[],
				has_more: false,
				scrollTop: 0,
				status: 'nomore',
				page: 1,
			}
		},
		methods: {
			// 查询网点信息
			search(){
				this.page = 1;
				this.pageList = [];
				this.goSearch();
			},
			goSearch() {
				this.$api.getArchives({
					page:this.page,
					model:5,
					channel:52,
					condition: this.keyword != ''?("`address` LIKE '%" + this.keyword + "%' OR `title` LIKE '%" + this.keyword + "%'"):''
				}).then(res => {
					this.status = 'nomore';
					if (res.code) {			
						this.pageList = [...this.pageList,...res.data.archivesList];
						this.has_more = res.data.pageList && res.data.pageList.length;
					}
				});
			},
			callPhone(e){
				uni.makePhoneCall({
					// 手机号
					phoneNumber: e,
					// 成功回调
					success: (res) => {
						console.log('拨打电话'+e)
					},
					// 失败回调
					fail: (res) => {
						uni.showToast({
							title:'拨打失败，电话可能被占用',
							icon:'none'
						})
					}
				});
			},
			openLoc(long, lat){
				uni.openLocation({
					latitude:parseFloat(lat),
					longitude:parseFloat(long),
					scale: 18,
					success: (res)=>{},
					fail: (res)=>{
						console.log(res);
					}
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page = ++this.page;
				this.goSearch();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("https://www.mopkeji.com/uploads/mini/13.png");
		background-color: #666;
	}
	.search {
		padding: 40rpx;
		background-color: #000000d9;
	}

	.content-body {
		background-color: #000000d9;
		height: 100%;
		min-height: 1004upx;
	}

	.content {
		background-color: #FFFFFF;
		width: calc(100% - 60upx);
		margin: 0 auto;
		margin-bottom: 30rpx;

		// 订单头部
		.order-head {
			padding: 20upx;
			font-size: 24upx;
			border-bottom: 2upx solid #d4d4d4;
			border-top: 20upx solid #EEEEEE;

			.order-id {
				line-height: 44upx;

				.shop-name {
					font-weight: bold;
				}
			}

			.order-status {
				background-color: gray;
				color: white;
				padding: 6upx;
				border-radius: 6upx;
			}
		}


		.order-content {
			padding: 20upx;

			.order-card {
				border-bottom: 2upx solid #d4d4d4;

				.order-img {
					width: 160upx;
					height: 160upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.order-text {
					margin-left: 20upx;
					line-height: 40upx;
					font-size: 25upx;
					padding-bottom: 30upx;

					.order-title {
						width: 470upx;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.order-way {
						width: 470upx;
						color: #666;
					}

					.order-amount {
						margin-left: 20upx;

					}

					.order-price {
						width: 470upx;
						color: red;
						font-weight: bold;
						margin-top:20upx;
					}
					
					.textsplit{
						width: 330upx;
					}
				}

			}

		}

		.order-footer {
			font-size: 24upx;
			color: #666;
			margin-left: 20upx;
			padding-bottom: 20upx;

			.cancel-btn {
				margin-right: 20upx;
			}
		}
	}
</style>
